<template>
	<div class="header">
		<!--商家信息-->
		<div class="content-wrapper">
			<!--商家头像-->
			<div class="avatar">
				<img width="64" height="64" :src="seller.avatar">
			</div>
			<!--右面内容-->
			<div class="content">
				<div class="title">
					<span class="brand"></span>
					<span class="name">{{seller.name}}</span>
				</div>
				<div class="description">
					{{seller.description}}/{{seller.deliveryTime}}分钟送达
				</div>
				<!--商家优惠信息-->
				<div v-if="seller.supports" class="supports">
					<span class="icon" :class="classMap[seller.supports[0].type]"></span>
					<span class="text">{{seller.supports[0].description}}</span>
				</div>
			</div>
			<!--优惠信心显示个数-->
			<div v-if="seller.supports" class="support-count" @click="showDetail">
				<span class="count">{{seller.supports.length}}个</span>
				<i class="icon-keyboard_arrow_right"></i>
			</div>
		</div>
		<!--公告栏-->
		<div class="bulletin-wrapper">
			<span class="bulletin-title"></span><span class="bulletin-text">{{seller.bulletin}}</span>
			<i class="icon-keyboard_arrow_right"></i>
		</div>
		<!--header背景图-->
		<div class="background">
			<img :src="seller.avatar" width="100%" height="100%">
		</div>
		<!--弹出框详情-->
		<transition name="fade">
			<div v-show="detailShow" class="detail">
				<!--内容区-->
				<div class="detail-wrapper clearfix">
					<div class="detail-main">
						<!--商家名-->
						<h1 class="name">{{seller.name}}</h1>
						<!--星星-->
						<div class="star-wrapper">
							<star :size="48" :score="seller.score"></star>
						</div>
						<!--优惠信息-->
						<div class="title">
							<div class="line"></div>
							<div class="text">优惠信息</div>
							<div class="line"></div>
						</div>
						<!--优惠信息详情-->
						<ul v-if="seller.supports" class="supports">
							<li class="support-item" v-for="(item,index) in seller.supports">
								<span class="icon" :class="classMap[seller.supports[index].type]"></span>
								<span class="text">{{seller.supports[index].description}}</span>
							</li>
						</ul>
						<!--商家公告-->
						<div class="title">
							<div class="line"></div>
							<div class="text">商家公告</div>
							<div class="line"></div>
						</div>
						<!--商家公告详情-->
						<div class="bulletin">
							<p class="content">{{seller.bulletin}}</p>
						</div>
					</div>
				</div>
				<!--底部关闭按钮-->
				<div class="detail-close" @click="hideDetail">
					<i class="icon-close"></i>
				</div>
			</div>
		</transition>
	</div>
</template>

<script type="text/ecmascript-6">
	import star from "components/star/star"
	
    export default{
        props: {
            seller: {
                type: Object
            }
        },
	    data() {
            return{
                detailShow: false
            }
	    },
	    methods: {
            showDetail(){
                this.detailShow=true;
            },
		    hideDetail(){
                this.detailShow=false;
		    }
	    },
	    created() {
            this.classMap = ['decrease','discount','special','invoice','guarantee']
	    },
	    components:{
            star
	    }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
	@import "../../common/stylus/mixin";
	.header
		position :relative
		color: #fff
		background :rgba(7,17,27,0.5)
		overflow:hidden
		/*商家信息*/
		.content-wrapper
			position:relative
			padding: 24px 12px 18px 24px
			font-size : 0px;
			.avatar
				display: inline-block
				vertical-align :top
				img
					border-radius :2px
			.content
				display: inline-block
				margin-left :14px
				.title
					margin: 2px 0 8px 0
					.brand
						display: inline-block
						vertical-align :top
						width: 30px
						height: 18px
						bg-img('brand')
						background-size :30px 18px
						background-repeat :no-repeat
					.name
						margin-left :6px
						line-height: 18px
						font-size 16px
						font-weight :bold
				.description
					margin-bottom: 10px
					line-height: 12px
					font-size :12px
				.supports
					.icon
						display :inline-block
						vertical-align :top
						width: 12px
						height: 12px
						margin-right: 4px
						background-size :12px 12px
						background-repeat:no-repeat
						&.decrease
							bg-img('decrease_1')
						&.discount
							bg-img('discount_1')
						&.guarantee
							bg-img('guarantee_1')
						&.invoice
							bg-img('invoice_1')
						&.special
							bg-img('special_1')
					.text
						line-height:12px
						font-size:10px
			.support-count
				position:absolute
				right:12px
				bottom: 14px
				padding:0 8px
				height: 24px
				line-height:24px
				border-radius:14px
				background:rgba(0,0,0,0.2)
				text-align:center
				.count
					vertical-align: top
					font-size:10px
				.icon-keyboard_arrow_right
					margin-left:2px
					line-height:24px
					font-size:10px
		/*公告栏*/
		.bulletin-wrapper
			position:relative
			height: 28px
			line-height: 28px
			padding:0 22px 0 12px
			white-space :nowrap
			overflow :hidden
			text-overflow:ellipsis
			background :rgba(7,17,27,0.2)
			.bulletin-title
				display:inline-block
				vertical-align :top
				margin-top :8px
				width: 22px
				height: 12px
				bg-img('bulletin')
				background-size :22px 12px
				background-repeat :no-repeat
			.bulletin-text
				vertical-align :top
				font-size:10px
				margin:0 4px
			.icon-keyboard_arrow_right
				position :absolute
				font-size:10px
				right: 12px
				top:8px
		/*header背景图*/
		.background
			position :absolute
			top:0
			left:0
			width:100%
			height:100%
			z-index:-1
			filter:blur(10px)
		/*弹出框详情*/
		.detail
			position:fixed
			top: 0
			left: 0
			z-index :100
			width: 100%
			height:100%
			background: rgba(7, 17, 27, 0.8)
			overflow :auto
			-webkit-backdrop-filter :blur(10px)
			.detail-wrapper
				min-height:100%
				width:100%
				.detail-main
					margin-top :64px
					padding-bottom: 64px
					.name
						line-height: 32px
						font-size:16px
						font-weight:700
						text-align: center
					.star-wrapper
						margin-top:16px
						padding:2px 0
						text-align: center
					/*优惠信息*/
					.title
						display:flex
						width:80%
						margin: 28px auto 24px auto
						.line
							flex:1
							position:relative
							top: -6px
							border-bottom :1px solid rgba(255,255,255,0.2)
						.text
							padding:0 12px
							font-size: 14px
							font-weight: 700
					/*优惠信息详情*/
					.supports
						width:80%
						margin:0 auto
						.support-item
							padding: 0 12px
							margin-bottom :12px
							font-size:0
							&:last-child
								margin-bottom :0
							.icon
								display:inline-block
								width: 16px
								height: 16px
								vertical-align :top
								margin-right: 6px
								background-size:16px 16px
								background-repeat:no-repeat
								&.decrease
									bg-img('decrease_2')
								&.discount
									bg-img('discount_2')
								&.guarantee
									bg-img('guarantee_2')
								&.invoice
									bg-img('invoice_2')
								&.special
									bg-img('special_2')
							.text
								line-height: 16px
								font-size: 12px
					.bulletin
						width:80%
						margin:0 auto
						.content
							padding:0 12px
							line-height: 24px
							font-size: 12px
			.detail-close
				position:relative
				width: 32px
				heigth:32px
				margin:-64px auto 0 auto
				clear:both
				font-size:32px

		/*弹出框过渡*/
		.fade-enter-active, .fade-leave-active
			transition: opacity .5s
		.fade-enter, .fade-leave-active
			opacity: 0
	
</style>